Wordcloud about #Trump 16/04/25—16/05/04 with data from Weibo and Twitter.
This HTML site intends to visualize the use of #Trump from 16/04/25 to 16/05/04 on Weibo and Twitter. It takes data from »data.js«, generates all words in the arrays allDays and allDaysCN. Then it assigns a font-size to each word according to the count of occurence in posts. This data is stored in the array days/daysCN. To allow more universal use some tings could still be simplyfied. For example there shouldn't be two functions in parallel for English and Chinese.
// Genereate the English words
var init = "";
for (k = 0; k < allDays.length; k++) {
init += "<div><span>" + allDays[k][0] + "</span></div>";
}
// Genereate the Chinese words
var initCN = "";
for (i = 0; i < allDaysCN.length; i++) {
initCN += "<div><span>" + allDaysCN[i][0] + "</span></div>";
}
$(document).ready(function(){
function newHTML(k) {
// Hide all words in the beginning of the loop.
$('.container > div').addClass('inAct');
for (j = 0; j < days[k].length; j++) {
// Iterate through the words and see which one matches to the dataset given for a particular day
$('.container > div').each(function(){
if($(this).children('span').html() === days[k][j][0]) {
//If the current word occured on that day remove the class that hides it and increase the font-size according to the word count (Factor is .7, works fine to fit in 13" screens)
$(this).removeClass('inAct').children().css("font-size",14+days[k][j][1]*.7).css("width",days[k][j][1]*1.5 + "px");
}
});
}
// after the words have their size we use jquery.masonry by David Desandro to layout the output.
$('.container').masonry({
itemSelector: 'div',
columnWidth: 1
});
newDay = "";
}
// Same thing for Chinese, should be unified one day.
function newHTMLCN(i) {
$('.containerCN > div').addClass('inAct');
for (j = 0; j < daysCN[i].length; j++) {
$('.containerCN > div').each(function(){
if($(this).children('span').html() === daysCN[i][j][0]) {
$(this).removeClass('inAct').children().css("font-size",14+daysCN[i][j][1]*.7).css("width",daysCN[i][j][1]*1.5 + "px");
}
});
}
$('.containerCN').masonry({
itemSelector: 'div',
columnWidth: 1
});
newDayCN = "";
}
//Run the loop, reset counter if the itereation reaches the end.
function myLoop () {
setTimeout(function () {
newHTML(k);
//Update the date top right from array "dates"
$('h1.day').html("Day: " + dates[k]);
k++;
if (k < days.length) {
myLoop();
}
if (k == days.length) {
k = 0;
myLoop();
}
}, 800);
}
$('.container').html(init);
var k = 0;
myLoop();
var newDay = "";
function myLoopCN () {
setTimeout(function () {
newHTMLCN(i);
i++;
if (i < daysCN.length) {
myLoopCN();
}
if (i == daysCN.length) {
i = 0;
myLoopCN();
}
}, 800);
}
$('.containerCN').html(initCN);
var i = 0;
myLoopCN();
var newDayCN = "";
});